import React, { Component } from "react";
import { NavLink } from 'react-router-dom'
import './login.css';


const loginTo = () => {
    console.log(123)
}
class Login extends Component {
    state = {
        account: '',
        pass: '',
        show: false
    }
    // 改变猫头鹰动作
    setFocus = () => {
        if (this.state.show === false) {
            this.setState({
                show: true
            })
        } else {
            this.setState({
                show: false
            })
        }
    }
    getAccount = (e) => {
        this.setState({
            account: e.target.value
        })
    }
    getPass = (e) => {
        this.setState({
            pass: e.target.value
        })
    }
    
    render() {
        return (
            <>
                <div className="father">
                    <div className="login-box">
                        <div className={this.state.show ? 'owl password' : 'owl'} id="owl">
                            <div className="hand"></div>
                            <div className="hand hand-r"></div>
                            <div className="arms">
                                <div className="arm"></div>
                                <div className="arm arm-r"></div>
                            </div>
                        </div>
                        <div className="input-box">
                            <input value={this.state.account} onChange={this.getAccount} type="text" placeholder="账号" />
                            <input value={this.state.pass} onChange={this.getPass} type="password" onBlur={this.setFocus} onFocus={this.setFocus} placeholder="密码" id="password" />
                            <NavLink to='/home'>
                                <div className="button" onClick={loginTo}>登录</div>
                            </NavLink>
                        </div>
                    </div>
                </div>

            </>
        );
    }
}


export default Login
